<template>
  <div class="login-container">
    <!-- 左侧背景及文案区域 -->
    <div class="login-bg">
      <div class="login-banner">
        <div class="banner-logo">
          <img src="/OIP-C.webp" alt="六月月考题" class="logo-img" />
          <!-- <span class="logo-text">你的专业电子邮局</span> -->
        </div>
        <div class="banner-desc">
          <h2 class="main-title">宏烨网约车</h2>
          <!-- <p class="sub-title"></p> -->
        </div>
      </div>
    </div>

    <!-- 右侧登录区（若依功能） -->
    <div class="login-form-wrap">
      <div class="login-form-header">
        <div class="video-icon">
          <svg-icon icon-class="video-play" class="play-icon" />
        </div>
        <h2 class="panel-title">宏烨网约车平台登录</h2>
      </div>

      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <!-- 账号输入 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="账号"
            class="form-input"
            prefix-icon="el-icon-user"
          />
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            class="form-input"
            prefix-icon="el-icon-lock"
            @keyup.enter.native="handleLogin"
          >
            <template #suffix>
              <span class="eye-icon" @click="togglePassword">
                <svg-icon
                  :icon-class="showPassword ? 'eye-open' : 'eye-close'"
                />
              </span>
            </template>
          </el-input>
        </el-form-item>

        <!-- 验证码（若依核心功能） -->
        <el-form-item prop="code" v-if="captchaEnabled">
          <div class="captcha-row">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              class="form-input captcha-input"
              prefix-icon="el-icon-picture"
              @keyup.enter.native="handleLogin"
            />
            <div class="captcha-img" @click="getCode">
              <img :src="codeUrl" alt="验证码" />
            </div>
          </div>
        </el-form-item>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            class="login-btn"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 若依原版功能逻辑
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      showPassword: false, // 密码显示切换
      codeUrl: "", // 验证码图片
      loginForm: {
        username: "admin", // 若依默认账号
        password: "admin123", // 若依默认密码
        rememberMe: false, // 记住密码功能
        code: "", // 验证码
        uuid: "", // 验证码 UUID
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [
          // 若依验证码校验
          { required: true, trigger: "change", message: "请输入验证码" },
        ],
      },
      loading: false,
      captchaEnabled: true, // 验证码开关（若依默认开启）
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode(); // 若依验证码初始化
    this.getCookie(); // 若依 Cookie 逻辑
  },
  methods: {
    // 密码显示切换（新增交互）
    togglePassword() {
      this.showPassword = !this.showPassword;
    },
    // 若依验证码获取
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled !== undefined ? res.captchaEnabled : true;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    // 若依 Cookie 逻辑
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username ?? this.loginForm.username,
        password: password ? decrypt(password) : this.loginForm.password,
        rememberMe: rememberMe ? Boolean(rememberMe) : false,
      };
    },
    // 若依登录逻辑
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
/* 登录容器 */
.login-container {
  display: flex;
  min-height: 100vh;
  /* 这里替换成你实际的背景图片链接 */
  background: url("/bg.jpg") no-repeat center center/cover;
  position: relative; /* 为子元素绝对定位做准备 */
}

/* 左侧背景区域 */
.login-bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  color: #fff;
}

.banner-logo {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.logo-img {
  width: 60px;
  height: auto;
  margin-right: 10px;
}

.banner-desc .main-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.banner-desc .sub-title {
  font-size: 20px;
  opacity: 0.9;
}

/* 右侧表单区域 */
.login-form-wrap {
  width: 420px;
  /* 改为绝对定位，实现悬浮效果 */
  position: absolute;
  right: 50px; /* 距离右侧的距离，可根据需求调整 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  background: rgba(255, 255, 255, 0.8); /* 背景磨砂半透明 */
  backdrop-filter: blur(10px); /* 磨砂效果，部分浏览器需开启硬件加速支持 */
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px; /* 可根据需求添加圆角 */
}

.login-form-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-form-header h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.login-form {
  width: 100%;
}

.form-input {
  height: 48px;
  font-size: 14px;
}

/* 验证码行样式 */
.captcha-row {
  display: flex;
  align-items: center;
}

.captcha-input {
  flex: 1;
  margin-right: 10px; /* 与验证码图片保持间距 */
}

.captcha-img {
  cursor: pointer;
}

.captcha-img img {
  height: 48px; /* 与输入框高度一致 */
  width: auto;
}

.eye-icon {
  cursor: pointer;
  color: #999;
  font-size: 14px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  margin-bottom: 15px;
}
</style>
